<template>
  <div class="bg-white">
    <Row>
      <Col span="22">
        <SearchForm @get="handleSearch"></SearchForm>
      </Col>
      <Col span="2">
        <div class="btn-wrapper">
          <span v-per="'add'">
            <Button class="editable-add-btn" type="primary" @click="handleAdd"
              ><template #icon><PlusOutlined /></template>新增企业</Button
            >
          </span>
        </div>
      </Col>
    </Row>
    <br />
    <Table
      :bordered="true"
      :dataSource="dataSource"
      :columns="entMgtColumns"
      :pagination="false"
      :loading="loading"
      :scroll="scroll"
      class="main-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span v-per="'update'">
            <a @click="edit(record)">{{ ButtonEnum.EDIT }}</a
            ><Divider type="vertical" /></span
          ><span v-per="'detail'">
            <a @click="view(record)">{{ ButtonEnum.DETAIL }}</a
            ><Divider type="vertical" /></span
          ><span v-per="'auth'">
            <a @click="auth(record)">{{ ButtonEnum.SUBSCRIBE_AUTH }}</a></span
          >
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    />

    <EditCreateEnterprise ref="editCreateEnterprise" @submitSuccess="getDataSource" />
    <AuditModal ref="auditModal" @submitSuccess="getDataSource"></AuditModal>
    <AuthDrawer ref="authDrawer" @get="getDataSource" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { Table, Pagination, Row, Col, Button, Divider } from 'ant-design-vue';
import SearchForm from '/@/views/tenant-center/enterpriseManagement/component/SearchForm.vue';
import EditCreateEnterprise from '/@/views/tenant-center/enterpriseManagement/component/EditCreateEnterprise.vue';
import AuditModal from '/@/views/tenant-center/enterpriseManagement/component/AuditModal.vue';
import AuthDrawer from '/@/views/tenant-center/enterpriseManagement/component/AuthDrawer.vue';
import { getEnterpriseMgtTable } from '/@/api/tenant-mgmt/enterpriseManagement/enterpriseManagement';
import { entMgtColumns } from './data';
import { ButtonEnum } from '/@/enums/buttonEnum';

const loading = ref(true);
const scroll = ref<undefined | object>(undefined);
const dataSource = ref();
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
const name = ref();

let params = {
  current: current.value,
  name: name.value,
  size: pageSize.value,
};

const getDataSource = async () => {
  try {
    let data = await getEnterpriseMgtTable(params);
    dataSource.value = data.items;

    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  if (val <= 10) {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

const handleSearch = (searchParam) => {
  params = {
    current: current.value,
    size: pageSize.value,
    name: searchParam.name,
  };
  getDataSource();
};

const editCreateEnterprise = ref();
const edit = async (record) => {
  editCreateEnterprise.value.openEdit(record.id, record.email, record.expireTime);
};
const view = (record) => {
  editCreateEnterprise.value.openDetail(record.id, record.email);
};
const authDrawer = ref();
const auth = (record) => {
  authDrawer.value.openAuth(record);
};
const handleAdd = () => {
  editCreateEnterprise.value.openCreate();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
